<template>
  <div>
    <div class="select_top">
      <el-input placeholder="请输入项目名称" v-model="codename" style="width:15%;margin-right:10px" clearable></el-input>
      <el-select v-model="codeflag" placeholder="工资类型" style="width:15%" clearable>
        <el-option
          v-for="item in wageType"
          :key="item.hash.code_id"
          :label="item.hash.code_name"
          :value="item.hash.code_id"
        >
        </el-option>
      </el-select>
      <el-button @click="getwageList">搜索</el-button>
      <el-button type="primary" style="float:right" @click="newwage">新增</el-button>
    </div>
    <el-table
      ref="filterTable"
      :data="wageList"
      style="width: 92%;font-size:13px;margin: 20px auto"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="hash.codeflagname"
        label="工资类型"
      >

      </el-table-column>
      <el-table-column
        prop="hash.codename"
        label="项目名称"
      >
      </el-table-column>
      <el-table-column
        prop="hash.codetype"
        label="项目类型"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.hash.codetype=='0'">数值</span>
          <span v-else>公式</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="hash.ordernumber"
        label="项目排序"
      >
      </el-table-column>
      <el-table-column
        prop="hash.codevalue"
        label="公式"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.hash.codevalue==''" style="color:#aaa">无</span>
          <span v-else>{{scope.row.hash.codevalue}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="changeSX(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="deleteSX(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage.sync="currentPage"
      :pageSize="pagesize"
      layout="total, prev, pager, next, jumper"
      :total="total"
      style="text-align:center"
    ></el-pagination>
    <el-dialog
      :title="poptitle"
      :visible.sync="showS"
    >
      <el-form labelWidth="140px">
        <el-form-item label="工资类型" class="is-required">
          <el-select v-model="wageData.codeflag" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in wageType"
              :key="item.hash.code_id"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工资项目" class="is-required">
          <el-input v-model="wageData.codename" v-validate="'required'" name="工资项目"></el-input>
          <div class="el-form-item__error">{{ errors.first('工资项目') }}</div>
        </el-form-item>
        <el-form-item label="项目排序" class="is-required">
          <el-input v-model="wageData.ordernumber" type="number" v-validate="'required'" name="项目排序"></el-input>
          <div class="el-form-item__error">{{ errors.first('项目排序') }}</div>
        </el-form-item>
        <el-form-item label="项目类型" class="is-required">
          <el-radio v-model="wageData.codetype" label="0" @change="wageData.codevalue=''">数值</el-radio>
          <el-radio v-model="wageData.codetype" label="1" @change="wageData.codevalue=''">公式</el-radio>
        </el-form-item>

        <el-form-item label="公式" class="is-required" v-if="wageData.codetype=='1'">
          <el-input v-model="wageData.codevalue" v-validate="'required'" name="公式"></el-input>
          <div class="el-form-item__error">{{ errors.first('公式') }}</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showS = false">取 消</el-button>
        <el-button type="primary" @click="newSX" v-if="poptitle=='新增工资项目'">确 定</el-button>
        <el-button type="primary" @click="saveSX" v-else>保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      currentPage: 1,
      pagesize: 10,
      total: 0,
      showS: false,
      poptitle: '新增工资项目',
      codeflag: '',
      codename: '',
      wageType: [],
      wageList: [],
      wageData: {
        codetype: '1',
      },
    };
  },
  created() {
    this.getwageType();
    this.getwageList();
  },
  methods: {
    handleCurrentChange() {
      this.getwageList();
    },
    getwageList() {
      const req = {
        handle: '5A4A3E4E20E0D8E9DF4D9F70BB944481169301F78074E09AB67592DEC25DEC83',
        codeflag: this.codeflag,
        query: this.codename,
        start: (this.currentPage - 1) * this.pagesize,
        limit: this.pagesize,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.wageList = ts.d.data.operation1;
        this.total = parseInt(ts.d.data.operation2[0].hash.allrs);
      });
    },
    newwage() {
      this.poptitle = '新增工资项目';
      this.showS = true;
    },
    changeSX(item) {
      this.wageData = {
        codetype: '0',
      };
      const req = {
        handle: '5A4A3E4E20E0D8E9F649FA99F50A3FE0317E134A1BCFC8A61F0C438E24ECDA3C',
        id: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.wageData = ts.d.data.operation1[0].hash;
      });

      this.poptitle = '修改工资项目';
      this.showS = true;
    },
    getwageType() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: '1',
        codetype: '02',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.wageType = ts.d.data.operation1;
      });
    },
    newSX() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          const req = {
            handle: '5A4A3E4E20E0D8E9FCB20E876828079DB6E5BF9A53AD2FA9BFF0B9210751F692',
            codename: this.wageData.codename,
            codevalue: this.wageData.codevalue,
            codetype: this.wageData.codetype,
            codeflag: this.wageData.codeflag,
            ordernumber: this.wageData.ordernumber,
          };
          this.$confirm('确定新增?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '提交成功!',
              });
              this.getwageList();
              this.showS = false;
              this.wageData = {};
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        } else {
          this.$message.error('内容不能为空！');
          return false;
        }
      });
    },
    saveSX() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          const req = {
            handle: '5A4A3E4E20E0D8E994D6836948462DFB77EA42E12ABF89A5B67592DEC25DEC83',
            codename: this.wageData.codename,
            id: this.wageData.id,
            codevalue: this.wageData.codevalue,
            codetype: this.wageData.codetype,
            codeflag: this.wageData.codeflag,
            ordernumber: this.wageData.ordernumber,
          };
          this.$confirm('确定提交修改?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '提交成功!',
              });
              this.getwageList();
              this.showS = false;
              this.wageData = {};
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        } else {
          this.$message.error('内容不能为空！');
          return false;
        }
      });
    },

    getsxList() {
      const req = {
        handle: '5A4A3E4E20E0D8E9DF4D9F70BB944481169301F78074E09AB67592DEC25DEC83',
        pname: this.queryParam,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sxList = ts.d.data.operation1;
      });
    },
    deleteSX(item) {
      const req = {
        handle: '5A4A3E4E20E0D8E94B8949FF1D1776BE8CD6599315F1B395B67592DEC25DEC83',
        id: item.hash.id,
      };
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.spost(this.ts, '/mainservlet', req).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.getwageList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },

  },
};
</script>

<style lang="stylus">
.el-form-item.is-required .el-form-item__label:before
  content: '*'
  color: #f56c6c
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.el-table th>.cell
  text-align center
.el-table .cell
  text-align center
.el-select
  width 14%
  margin-right 1%
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>
